// PLC变量行组件，用于基础控制和分组控制面板的复用
import React from 'react';
import { isBooleanType, displayReadValue, displayGroupReadValue } from '../utils/plcUtils';

/**
 * PLC变量行组件
 * @param {Object} props 组件属性
 * @param {Object} props.variable 变量对象
 * @param {number} props.index 变量索引
 * @param {Function} props.onUpdate 更新变量的回调函数
 * @param {Function} props.onRemove 删除变量的回调函数
 * @param {Function} props.onTriStateChange 三态选择框变化的回调函数
 * @param {boolean} props.showReadValue 是否显示读取值
 * @param {Object} props.readResults 读取结果（基础控制面板使用）
 * @param {Object} props.groupData 分组数据（分组控制面板使用）
 * @param {string} props.groupId 分组ID（分组控制面板使用）
 * @param {Object} props.variableTypes 变量类型映射
 * @param {boolean} props.isGroup 是否为分组模式
 * @param {number} props.totalVariables 变量总数（用于删除按钮禁用）
 */
const PLCVariableRow = ({
  variable,
  index,
  onUpdate,
  onRemove,
  onTriStateChange,
  showReadValue = false,
  readResults = {},
  groupData = {},
  groupId = null,
  variableTypes = {},
  isGroup = false,
  totalVariables = 1
}) => {
  // 处理变量值变化
  const handleValueChange = (e) => {
    onUpdate(index, 'value', e.target.value);
  };

  // 处理三态选择框变化
  const handleTriStateChangeInternal = (e) => {
    const value = e.target.value === 'true' ? true : e.target.value === 'false' ? false : '';
    onTriStateChange(index, value);
  };

  // 处理类型变化
  const handleTypeChange = (e) => {
    onUpdate(index, 'type', e.target.value);
  };

  // 处理名称变化
  const handleNameChange = (e) => {
    onUpdate(index, 'name', e.target.value);
  };

  // 处理地址变化
  const handleAddressChange = (e) => {
    onUpdate(index, 'address', e.target.value);
  };

  // 处理描述变化
  const handleDescriptionChange = (e) => {
    onUpdate(index, 'description', e.target.value);
  };

  return (
    <tr>
      <td>
        <input
          type="text"
          value={variable.name || variable.description || ''}
          onChange={handleNameChange}
          placeholder="变量名"
        />
      </td>
      <td>
        <input
          type="text"
          value={variable.address}
          onChange={handleAddressChange}
          placeholder="PLC地址"
          className="address-input"
          title={variable.address}
        />
      </td>
      <td>
        {isBooleanType(variable.address, variableTypes) ? (
          <select 
            value={variable.value === true ? 'true' : variable.value === false ? 'false' : ''}
            onChange={handleTriStateChangeInternal}
            className="tri-state-select"
          >
            <option value="">未选中</option>
            <option value="true">TRUE</option>
            <option value="false">FALSE</option>
          </select>
        ) : (
          <input
            type="text"
            value={variable.value}
            onChange={handleValueChange}
            placeholder="变量值"
          />
        )}
      </td>
      {showReadValue && (
        <td>
          <span className="read-value">
            {isGroup 
              ? displayGroupReadValue(variable.address, groupId, groupData)
              : displayReadValue(variable.address, readResults)
            }
          </span>
        </td>
      )}
      <td>
        {isGroup ? (
          <select
            value={variable.type || 'UNKNOWN'}
            onChange={handleTypeChange}
            style={{ width: '100px' }}
          >
            <option value="UNKNOWN">未知</option>
            <option value="BOOL">BOOL</option>
            <option value="BYTE">BYTE</option>
            <option value="WORD">WORD</option>
            <option value="DWORD">DWORD</option>
            <option value="INT">INT</option>
            <option value="DINT">DINT</option>
            <option value="REAL">REAL</option>
            <option value="CHAR">CHAR</option>
            <option value="STRING">STRING</option>
          </select>
        ) : null}
        <button 
          onClick={() => onRemove(index)} 
          disabled={totalVariables <= 1}
        >
          删除
        </button>
      </td>
    </tr>
  );
};

export default PLCVariableRow;